<template>
  <div>
    <!-- 封装Tips组件复用 -->
    <Tips />
    <!-- 购物车商品列表（每一项商品） -->
    <van-checkbox-group v-model="result" :disabled="isEditing">
      <van-checkbox
        :name="item.id"
        v-for="item in cartList"
        :key="item.id"
        @click="goodsItemClick(item)"
      >
        <van-swipe-cell>
          <van-card
            :num="item.number"
            :price="item.retail_price.toFixed(2)"
            :title="item.goods_name"
            :thumb="item.list_pic_url"
          />

          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="handlecartDelete(item.product_id)"
            />
          </template>
        <!-- 步进器 -->
        <van-stepper
          v-model="item.number"
          v-show="isEditing"
          @change="updateCart(item)"
        />
        </van-swipe-cell>


      </van-checkbox>
    </van-checkbox-group>
    <!-- SubmitBar 提交订单栏 -->
    <van-submit-bar
      :price="checkedGoodsAmount * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checkedAll" :disabled="isEditing"
        >全选</van-checkbox
      >
      <template #tip>
        累计共{{ goodsCount }}件商品，可点击
        <van-button
          :type="isEditing ? 'danger' : 'primary'"
          @click="isEditing = !isEditing"
          >{{ isEditing ? "完成编辑" : "编辑" }}</van-button
        >
        按钮进行商品数量修改
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import Tips from "@/components/Tips";
import { GetCartListData, cartChecked, cartUpdate ,cartDelete} from "@/request/api";
export default {
  data() {
    return {
      //全选按钮的布尔值
      checked: true,
      //result存放被选中了的checkbox项的name属性
      result: [],
      // 购物车商品列表
      cartList: [],
      //所有商品总价的初始值
      checkedGoodsAmount: 0,
      //选中的商品总数
      goodsCount: "",
      //步进器初始值
      value: 1,
      //控制步进器显示和隐藏
      isEditing: false,
    };
  },
  created() {
    GetCartListData().then((res) => {
      this.renderData(res.data);
    });
  },
  computed: {
    checkedAll: {
      get() {
        return this.result.length === this.cartList.length;
      },
      set(val) {
        if (this.isEditing) return;
        // console.log("set", val);

        let ids = this.cartList.map((item) => {
          return item.product_id;
        });
        cartChecked({
          isChecked: val === false ? 0 : 1,
          productIds: ids.join(),
        }).then((res) => {
          this.renderData(res.data);
        });
      },
    },
  },
  methods: {
    handlecartDelete(id) {
      cartDelete({
        productIds:id.toString(),
      }).then((res) => {
        this.renderData(res.data);
      });
    },
    updateCart(item) {
      // console.log(item);
      cartUpdate({
        goodsId: item.goods_id,
        id: item.id,
        number: item.number,
        productId: item.product_id,
      }).then((res) => {
        this.renderData(res.data);
      });
    },
    renderData(data) {
      //把购物车数据渲染到页面上
      //在每一次渲染数据之前,this.result需要做一个清空,否则this.result的长度会越来越长,影响到checkedAll的值有错误
      this.result = [];
      let { cartList, cartTotal } = data; //对获取数据进行解构

      this.cartList = cartList; //刷新data中的数据对视图层进行渲染
      this.checkedGoodsAmount = cartTotal.checkedGoodsAmount;
      this.goodsCount = cartTotal.goodsCount;
      // console.log(cartTotal);

      this.cartList.map((item) => {
        item.checked ? this.result.push(item.id) : "";
        // console.log(cartList);
      });
    },
    onSubmit() {
      // console.log("onSubmit");
    },
    goodsItemClick(item) {
      if (this.isEditing) return;
      //点击每一项商品的时候发起请求
      // console.log(item);
      cartChecked({
        isChecked: item.checked === 1 ? 0 : 1,
        productIds: item.product_id,
      }).then((res) => {
        this.renderData(res.data);
      });
    },
  },
  components: {
    Tips,
  },
};
</script>
 
<style lang = "less" scoped>
/deep/.van-checkbox__label {
  padding: 0.01rem;
  width: 100%;
}
/deep/.van-checkbox-group {
  padding: 0.1rem 0.1rem 1.6rem 0.1rem;

  /* background-color: #fff; */
  .van-checkbox {
    padding: 0.1rem 0;
    border-bottom: 1px solid #ccc;
    .van-checkbox__label {
      .van-card {
        background-color: #fafafa;
      }
    }
  }
}
/deep/.van-checkbox__label {
  flex: 1;
}
.van-submit-bar {
  bottom: 0.5rem;
}
.van-submit-bar__tip {
  display: flex;
  /* 默认主轴是横向，align-item是控制侧轴 */
  align-items: center;
  .van-button {
    margin: 0 0.06rem;
  }
}
.van-card__title {
  font-size: 0.16rem;
}
.van-stepper {
  text-align: right;
  background-color: #fafafa;
}
.delete-button {
  height: 100%;
}
</style>